<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { useAddUserStore } from '../../store/addUser'
import { ElTooltip } from 'element-plus'
import user from '../../api/user'
import AddUser from './addUser.vue'
import { useUserStore } from '../../store/user'
const userStore = useUserStore()
const addUserStore = useAddUserStore()
const username = ref('')
const phone = ref('')
const valueSelectState = ref('')
const time = ref()
const showSrearch = ref(true)
function changeShowSerach() {
    showSrearch.value = !showSrearch.value
}
async function searchUser() {
    console.log(userStore.pageNum)
    await user.getSpecieUser(username.value, phone.value, valueSelectState.value,time.value, userStore.pageNum, userStore.pageSize).then(res => {
        userStore.userList = res.data.data
        userStore.total = res.data.total
        console.log(res.data)
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        userStore.changeLoading()
    })
}
async function editUser() {
    await user.getEditUser(userStore.selectedIds[0]).then(res => {
        addUserStore.setOpen(true)
        addUserStore.user=res.data.data
    }).catch(err => {
        console.log(err)
    })
}
async function deleteUser() {
    await user.deleteUser(userStore.selectedIds).then(res => {
        if (res.data.code == 200) {
            utils.showMessage('删除成功', 'success', 2000)
        } else {
            utils.showMessage('删除失败', 'error', 2000)
        }
    }).catch(err => {
        console.log(err)
    })
    await user.getAllUserList(userStore.pageNum, userStore.pageSize).then(res => {
        userStore.userList = res.data.data
        userStore.total = res.data.total
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        userStore.changeLoading()
    })
}
</script>

<template>
    <div class="container">
        <div class="first-line">
            <div class="first-left" v-show="showSrearch">
                <div class="input-group">
                    <span class="label">用户名称：</span>
                    <el-input v-model="username" placeholder="请输入用户名称" clearable style="width: 240px;"></el-input>
                </div>
                <div class="input-group">
                    <span class="label">手机号码：</span>
                    <el-input v-model="phone" placeholder="请输入手机号码" clearable style="width: 240px;"></el-input>
                </div>
                <div class="input-group">
                    <span class="label">状态：</span>
                    <el-select clearable v-model="valueSelectState" placeholder="请选择状态" style="width: 240px;">
                        <el-option label="正常" :value=1></el-option>
                        <el-option label="停用" :value=0></el-option>
                    </el-select>
                </div>
            </div>
        </div>

        <div class="second-line" v-show="showSrearch">
            <div class="second-left">
                <div class="input-group">
                    <span class="label">创建时间：</span>
                    <el-date-picker v-model="time" type="datetimerange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss"
                        style="width: 400px;">
                    </el-date-picker>
                </div>
                <div class="button-group">
                    <el-button type="primary" @click="searchUser">查询</el-button>
                    <el-button type="danger">重置</el-button>
                </div>
            </div>
        </div>
        <div class="third-line">
            <div class="third-left">
                <el-button type="success" @click="addUserStore.setOpen(true)"><el-icon>
                        <Plus />
                    </el-icon>新增</el-button>
                <el-button type="warning" :disabled="userStore.selectedIds.length!==1" @click="editUser"><el-icon>
                        <Edit />
                    </el-icon>修改</el-button>
                <el-button type="danger" :disabled="userStore.selectedIds.length==0"  @click="deleteUser"><el-icon>
                        <Delete />
                    </el-icon>删除</el-button>
                <el-button type="info"><el-icon>
                        <Bottom />
                    </el-icon>导出</el-button>
            </div>
            <div class="third-right">
                <el-tooltip effect="dark" :content="showSrearch ? '隐藏搜索' : '显示搜索'" placement="top">
                    <el-icon @click="changeShowSerach" class="icon-search">
                        <Search />
                    </el-icon>
                </el-tooltip>
            </div>
        </div>
    </div>
    <AddUser />
</template>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 第一行样式 */
.first-line .first-left {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* 第二行样式 */
.second-line .second-left {
    display: flex;
    gap: 20px;
    align-items: center;
}

.third-line .third-left {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.third-right {
    display: flex;
    justify-content: right;
}

.input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.label {
    white-space: nowrap;
    font-size: 14px;
    color: #606266;
}



/* 调整日期选择器与按钮间距 */
.el-date-picker {
    margin-right: 20px;
}

.icon-search {
    cursor: pointer;
    padding: 8px;
    transition: color 0.3s;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-search:hover {
    color: #409eff;
    /* Element Plus 主题色 */
}
@media (max-width: 768px) {
  .container {
    gap: 12px;
    padding: 0 0.5rem;
  }

  .first-line .first-left {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .input-group {
    width: 100%;
  }

  .input-group :deep(.el-input),
  .input-group :deep(.el-select) {
    flex: 1;
    width: auto !important;
  }

  .second-line .second-left {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .second-line .input-group :deep(.el-date-picker) {
    width: 100% !important;
    margin-right: 0;
  }

  .button-group {
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .button-group :deep(.el-button) {
    flex: 1;
  }

  .third-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 0.5rem;
  }

  .third-line .third-left {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: space-between;
  }

  .third-line .third-left :deep(.el-button) {
    flex: 1;
    padding: 8px;
    min-width: 0;
    font-size: 13px;
  }

  .third-line .third-left :deep(.el-button .el-icon) {
    margin-right: 2px;
    font-size: 14px;
  }

  .third-right {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    z-index: 100;
  }

  .icon-search {
    font-size: 1.2rem;
    padding: 10px;
  }
}
</style>